<template>
	<view style="height: 100%; background-color: #FFFFFF;">
		<view class="search-box">
			<view class="search-item">
				<view class="dingwei-txt">贵阳<icon class="iconfont icon-xiajiantou"></icon></view>
				<view class="shuxian"></view>
				<input class="ipt" :placeholder="placeHolder" v-model="keyword" @input="suggestion"/>
			</view>
		</view>
		<view class="his-clear-box" v-if="showHistory && historyList && historyList.length > 0">
			<view class="his-box">
				<image src="@/static/img/start-time.png" style="width: 26rpx; height: 26rpx;padding-right: 10rpx"></image>
				<text>历史记录</text>
			</view>
			<view class="clear-box" @click="clearHistory">
				清空
			</view>
		</view>
		<view class="list-box" v-if="showHistory">
			<view class="list-item" v-for="(item, index) in historyList" @click="clickItem(item)">
				<image src="@/static/img/weizhi.png" style="width: 27rpx; height: 35rpx;"></image>
				<view class="item-txt-box">
					<view class="item-show">{{item.showAddress}}</view>
					<view class="item-full">{{item.fullAddress}}</view>
				</view>
			</view>
		</view>
		<view class="list-box" v-else>
			<view class="list-item" v-for="(item, index) in searchList"  key="index" @click="clickItem(item)">
				<image src="@/static/img/weizhi.png" style="width: 27rpx; height: 35rpx;"></image>
				<view class="item-txt-box">
					<view class="item-show">{{item.showAddress}}</view>
					<view class="item-full">{{item.fullAddress}}</view>
				</view>
				<view class="item-distance" v-if="item.distanceNum">
					{{item.distanceNum}}{{item.distanceUnit}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {suggestion,getClientTripAddressHistory} from '@/api/api.js';
	
	export default {
		data() {
			return {
				showHistory:true,
				d: null,
				n:1,
				placeHolder:'请输入起点',
				keyword:'',
				searchList:[],
				startPosition:{
				},
				startPositionStr: null,
				historyList:[]
			}
		},
		onLoad(p) {
			if(p){
				if(p.d){
					this.d = p.d;
				}
				if(p.n && 2==p.n){
					this.n = 1*p.n;
					this.placeHolder = '请输入终点';
				}
				if(p.lat && p.lng){
					console.log('p=',p)
					this.startPosition.lat = p.lat;
					this.startPosition.lng = p.lng;
					this.startPositionStr = this.startPosition.lat + ',' + this.startPosition.lng;
				}
			}
			this.getClientTripAddressHistory();
		},
		methods: {
			clearHistory(){
				this.showHistory = false;
			},
			clickItem(item){
				let param = {
					n:this.n,
					item: item
				}
				// 触发监听、然后返回上级页面
				if(this.d && 1==this.d){
					uni.$emit('positionSelected4Driver', param);
				}
				else{
					uni.$emit('positionSelected', param);
				}
				uni.navigateBack();
			},
			// 地点关键词搜索
			suggestion(){
				if(!this.keyword || !this.keyword.trim()){
					console.log('--------------')
					this.showHistory = true;
					return false;
				}
				let param = {
					keyword: this.keyword,
					region:'贵阳市',
					//address_format: 'short',// 短地址（不含省市区）
					location: this.startPositionStr
				}
				suggestion(param).then(res => {
					if(res && res.data && res.data.data && res.data.data.length > 0){
						this.showHistory = false;
						let arr = res.data.data;
						this.searchList = [];
						arr.map(item=>{
							this.searchList.push({
								showAddress: item.title,
								fullAddress: item.address,
								province: item.province,
								city: item.city,
								district: item.district,
								latitude: item.location.lat,
								longitude: item.location.lng,
								preDistance: item._distance,
								distanceNum: item.distanceNum,
								distanceUnit: item.distanceUnit
							});
						})
					}
					else if(!this.searchList || this.searchList.length <= 0){
						this.showHistory = true;
					}
				})
			},
			getClientTripAddressHistory(){
				getClientTripAddressHistory().then(res=>{
					if(res && res.data){
						this.historyList = res.data;
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
	.search-box{
		width: 100%;
		height: 115rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
	}
	.search-item{
		width: 100%;
		height: 87rpx;
		background: #F4F4F4;
		border-radius: 43rpx;
		display: flex;
		align-items: center;
	}
	
	.dingwei-txt {
		height: 87rpx;
		line-height: 87rpx;
		padding-left: 30rpx;
		font-size: 29rpx;
		font-weight: 400;
		color: #333333;
	}
	.shuxian{
		width: 1rpx;
		height: 36rpx;
		border: 1rpx solid #DFDFDF;
		margin: 0 20rpx;
	}
	.ipt{
		flex: 1;
	}
	.his-clear-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		height: 90rpx;
		background: #F6F6F6;
	}
	.his-box{
		display: flex;
		align-items: center;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.clear-box{
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.list-box{
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
	}
	.list-item{
		align-items: center;
		display: flex;
		padding: 20rpx 30rpx;
	}
	.list-item:not(:last-child){
		border-bottom: 1rpx solid #DFDFDF;
	}
	.item-txt-box{
		flex: 1;
		margin-left: 18rpx;
	}
	.item-show{
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.item-full{
		margin-top: 8rpx;
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.item-distance{
		font-size: 25rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
</style>
